*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
    background: #333;
}
.box{
    width: 100%;
    height: 280px;
    margin: 50px auto;
}
.box .link{
    width: 205px;
    height: 280px;
    margin: 0 20px;
    float: left;
    position: relative;
}
/*span*/
.link .icon{
    width: 100%;
    height: 190px;
    display: inline-block;
    transition:0.2s linear;
    -webkit-transition:0.2s linear;
    -ms-transition:0.2s linear;
    -o-transition:0.2s linear;
    -moz-transition:0.2s linear;
}
.link-miss .icon{
    background:url(img/0.jpg) no-repeat center center;
}
.link-play .icon{
    background:url(img/1.jpg) no-repeat center center;
}
.link-touch .icon{
    background:url(img/2.jpg) no-repeat center center;
}
.link .icon:hover{
    tansform:rotate(360deg) scale(1.2);
    -ms-transform:rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.2);
    -o-transform:rotate(360deg) scale(1.2);
    -moz-tansform:rotate(360deg) scale(1.2);
}
.button{
    position: relative;
    display: block;
    width: 180px;
    height: 50px;
    text-decoration: none;
    line-height: 50px;
    color: #2bcb70;
    font-family: sans-serif;
    font-weight: bold;
    border: 2px solid rgba(255,255,255,0.8);
    padding-left: 20px;
    margin: 0 auto;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background: url(img/right.jpg) no-repeat 130px center;
    transition:0.2s ease;
    -webkit-transition:0.2s ease;
    -ms-transition:0.2s ease;
    -o-transition:0.2s ease;
    -moz-transition:0.2s ease;
}
.button:hover{
    border: 2px solid rgba(255,255,255,1);
    background-position: 140px center;
}
.button .line{
    display: block;
    position: absolute;
    background: none;
    transition:0.2s ease;
    -webkit-transition:0.2s ease;
    -ms-transition:0.2s ease;
    -o-transition:0.2s ease;
    -moz-transition:0.2s ease;
}
.button:hover .line{
    background: #fff;
}
/*top 高度不变，宽度在变，位置从左到右*/
.button .line-top{
    width: 0px;
    height: 2px;
    left: -110%;
    top: -2px;
}
.button:hover .line-top{
    width: 180px;
    left: -2px;
}
.button .line-bottom{
    width: 0px;
    height: 2px;
    right: -110%;
    bottom: -2px;
}
.button:hover .line-bottom{
    width: 180px;
    right: -2px;
}
.button .line-left{
    width: 2px;
    height: 0px;
    bottom: -110%;
    left: -2px;
     
}
.button:hover .line-left{
    width: 2px;
    height: 50px;
    bottom: -2px;
    left: -2px;
}
.button .line-right{
    width: 2px;
    height: 0px;
    top: -110%;
    right: -2px;
     
}
.button:hover .line-right{
    width: 2px;
    height: 50px;
    top: -2px;
    right: -2px;
}
.box .tip{
    position: absolute;
    padding: 0 14px;
    height: 35px;
    line-height: 35px;
    background: #2dcb70;
    top: 160px;
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    margin: 0 auto;
    border-radius: 3px;
    opacity: 0;
 
}
.tip em{
    font-style: normal;
 
}
.tip span{
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    border: 7px solid transparent;
    border-top-color: #2dcb70;
    left: 50%;
    margin-left: -3px;
    bottom:-14px;
}